<template>
  监听属性-{{age}}--{{userInfo.name}}
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

const age = ref<number>(18)
watch(age,(n, o)=>{
  console.log(n, o)
})
/**
 * 定义用户信息结构
 */
 interface UserInfo {
  id: number,
  name: string,
  sex: number, // 1为男，2为女,
  status: number // 0：禁用；1启用；2:已废弃
}
const userInfo = ref<UserInfo>({
  id: 1,
  name: '张三',
  sex: 1,
  status: 1
})
watch(userInfo,(n,o)=>{
  console.log(n, o)
},{
  //deep: true
})
onMounted(()=>{
  setTimeout(()=>{
    age.value = 20
    //userInfo.value.name = '李四'
    userInfo.value = {
      ...userInfo.value,
      name: '李四'
    }
  }, 2000)
})
</script>
<style lang="less" scoped>

</style>